<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>heart</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            background: #262626;
            position: relative;
            z-index: 100;
        }

        section {
            width: 100%;
            height: 100vh;
            background-image: url('./img/bg.jpg');
            background-size: cover;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
        }

        #aaa {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <audio src="audio/水滴落下.mp3" id="music" autoplay></audio>
    <section id="panel">
        <div id="aaa"></div>
    </section>
</body>

</html>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.ripples-min.js"></script>
<script>
    var music = document.getElementById('music');
    var aaa = document.getElementById('aaa');
    aaa.onclick = function () {
        music.play();
    }
    // 设置涟漪效果
    $('section').ripples({
        //imageUrl: null,   //要用作背景的图像的URL。如果没有，插件将尝试使用计算的background-imageCSS属性的值。也接受数据URI。
        dropRadius: 12,		//通过在画布上单击或移动鼠标而产生的拖放的大小（以像素为单位）。
        perturbance: 0.01,	//基本上由波纹引起的折射量。0表示没有折射。
        resolution: 900,	//要呈现的WebGL纹理的宽度和高度。此值越大，渲染越平滑，涟漪传播越慢。
        // interactive: true,//鼠标点击和鼠标移动是否会触发效果。
        //crossOrigin: "",  //用于受影响图像的crossOrigin属性。
    });

    // Automatic drops
    setInterval(function () {
        var $el = $('section');
        var x = Math.random() * $el.outerWidth();
        var y = Math.random() * $el.outerHeight();
        var dropRadius = 20;
        var strength = 0.08 + Math.random() * 0.04;

        $el.ripples('drop', x, y, dropRadius, strength);
    }, 2500);

</script>